<template>
    <div class="usermanageContainer">
        <el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane
				v-for="(item, index) in tnavList"
				:key="index"
				:label="item.tnav_name"
				:name="`${index}`"
			>
				<span slot="label">
					<i :class="item.icon_name"></i>
					{{item.tnav_name}}
				</span>
<transition mode="out-in">
					<component :is="selectComponent"></component>
				</transition>
			</el-tab-pane>
		</el-tabs>
    </div>
</template>

<script>
import deparlist from "./deparlist.vue"
export default {
    data() {
        return {
            tnavList:[],
            activeName: "0",
            selectComponent:"deparlist"
        }
    },
    methods: {
        // 获取三级菜单
        getTnav(id){
            this.$ajax.get("/tnav?parentid=" + id).then(res=>{
                this.tnavList = res.data.results;
            }).catch(err=>{

            })
        },
        handleClick(tab, event) {
			console.log(tab, event);
		}
    },
    mounted() {
        this.getTnav(this.snavId)
    },
    components:{
        deparlist
    },
    props:["snavId"]
}
</script>


<style lang="scss" scoped>

</style>